<template>
  <div class="chart-item row1-left">
    <div class="chart-header">
      <h3>器具分布</h3>
      <div class="chart-tabs">
        <el-radio-group v-model="distributionType" @change="handleDistributionTypeChange">
          <el-radio-button label="project">项目分布</el-radio-button>
          <el-radio-button label="warehouse">库房分布</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="chart-content">
      <div ref="distributionChart" class="chart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'DistributionChart',
  data() {
    return {
      distributionType: 'project',
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeUnmount() {
    if (this.chart) {
      this.chart.dispose()
    }
  },
  methods: {
    initChart() {
      this.$nextTick(() => {
        const chartDom = this.$refs.distributionChart
        if (!chartDom) return

        this.chart = echarts.init(chartDom)
        this.updateChart()
      })
    },

    updateChart() {
      const projectData = [
        { name: '工程项目A', value: 1048, color: '#5470c6' },
        { name: '工程项目B', value: 735, color: '#91cc75' },
        { name: '工程项目C', value: 580, color: '#fac858' },
        { name: '工程项目D', value: 484, color: '#ee6666' },
        { name: '其他项目', value: 300, color: '#73c0de' }
      ]

      const warehouseData = [
        { name: '华东库房', value: 1200, color: '#5470c6' },
        { name: '华南库房', value: 800, color: '#91cc75' },
        { name: '华北库房', value: 600, color: '#fac858' },
        { name: '西南库房', value: 400, color: '#ee6666' },
        { name: '其他库房', value: 200, color: '#73c0de' }
      ]

      const currentData = this.distributionType === 'project' ? projectData : warehouseData

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            const data = params[0]
            return `${data.name}<br/>${data.seriesName}: ${data.value}`
          }
        },
        grid: {
          left: '15%',
          right: '10%',
          top: '10%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#666',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: '#f0f0f0',
              type: 'dashed'
            }
          }
        },
        yAxis: {
          type: 'category',
          data: currentData.map(item => item.name),
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#333',
            fontSize: 12,
            margin: 10
          }
        },
        series: [
          {
            name: this.distributionType === 'project' ? '项目分布' : '库房分布',
            type: 'bar',
            data: currentData.map(item => ({
              value: item.value,
              itemStyle: {
                color: item.color,
                borderRadius: [0, 4, 4, 0]
              }
            })),
            barWidth: '60%',
            label: {
              show: true,
              position: 'right',
              color: '#666',
              fontSize: 11,
              formatter: '{c}'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.3)'
              }
            }
          }
        ]
      }

      this.chart.setOption(option)
    },

    handleDistributionTypeChange(type) {
      this.distributionType = type
      this.updateChart()
      this.$emit('distribution-type-change', type)
    }
  }
}
</script>

<style lang="scss" scoped>
/* 组件特有样式 */
.chart-tabs {
  ::v-deep .el-radio-button__inner {
    padding: 6px 12px;
    font-size: 12px;
  }
}
</style>
